<template>
  <div>
    <el-card>
      <div slot="header" style="font-size: 20px; font-weight: 600">
        服务器管理
      </div>
      <el-table
        :data="servers"
        border
        stripe
        v-loading="tableLoading"
        element-loading-text="正在加载服务器数据..."
      >
        <el-table-column
          align="center"
          label="服务器名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="服务器IP"
          prop="ip"
        ></el-table-column>
        <el-table-column align="center" label="端口" prop="port">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.port }} </span>
              <el-button
                type="text"
                round
                plain
                icon="el-icon-edit"
                style="border: none; margin-left: 10px"
                @click="
                  nowServerIndex = scope.$index;
                  editDialogFlag = true;
                "
              ></el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="启用/禁用" align="center" width="200px">
          <template slot-scope="scope">
            <div
              style="
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                font-weight: 600;
              "
            >
              <div>
                <el-switch
                  v-model="scope.row.status"
                  @change="
                    scope.row.status = !scope.row.status;
                    nowServerIndex = scope.$index;
                    changeServerRunStatus($event);
                  "
                >
                </el-switch>
              </div>
              <div>
                <span style="color: #409eff" v-if="scope.row.status"
                  >已启用</span
                >
                <span style="color: red" v-else>已禁用</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改端口" :visible.sync="editDialogFlag" width="30%">
        <div>
          <span
            >当前{{
              nowServerIndex == 0 ? "SMTP" : "POP3"
            }}服务器运行的端口为:&nbsp;&nbsp;&nbsp;{{
              servers[nowServerIndex].port
            }}
          </span>
          <br />
          <br />
          <br />
          <div class="div1">
            <div style="flex: 2">
              新端口号&nbsp;&nbsp;<span style="color: red">*</span>
            </div>

            <el-input
              label="新端口号"
              v-model="newPort"
              placeholder="请输入新的端口号"
              style="flex: 7"
            ></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogFlag = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              editDialogFlag = false;
              changePort();
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clubList: [],
      queryInfo: { clubId: "" },
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      newDialogFlag: false,
      editDialogFlag: false,
      formLabelWidth: "120",
      tableLoading: false,
      newPort: "",
      nowServerIndex: 0,
      nowDialogBelong: "",
      servers: [
        { name: "SMTP服务器", ip: "124.221.41.252", port: null, status: "" },
        { name: "POP3服务器", ip: "124.221.41.252", port: null, status: "" }
      ]
    };
  },
  created() {
    window.sessionStorage.setItem("activePath", "/serverManagement");
    this.getSmtpInfo();
    this.getPopInfo();
    console.log(this.servers);
  },
  methods: {
    async getSmtpInfo() {
      this.tableLoading = true;
      const { data: res } = await this.$http({
        url: "smtpmail/smtp/status",
        method: "get"
      });
      console.log(res);
      if (res.code === 20000) {
        this.servers[0].port = res.data.runningPort;
        if (res.data.status === 1) this.servers[0].status = true;
        else this.servers[0].status = false;
      }
      this.tableLoading = false;
    },

    async getPopInfo() {
      this.tableLoading = true;
      const { data: res } = await this.$http({
        url: "smtpmail/pop3/status",
        method: "get"
      });
      console.log(res);
      if (res.code === 20000) {
        this.servers[1].port = res.data.runningPort;
        if (res.data.status === 1) this.servers[1].status = true;
        else this.servers[1].status = false;
      }
      this.tableLoading = false;
    },

    /**
     * @description 切换端口
     */
    async changePort() {
      if (this.nowServerIndex == 0) {
        const { data: res } = await this.$http({
          url: "smtpmail/smtp/port",
          params: { port: this.newPort },
          method: "get"
        });
        console.log(res);
        if (res.code === 20000) {
          this.getSmtpInfo();
          this.$message.success("修改成功!");
          this.newPort = "";
        } else {
          this.$message.error("修改失败!");
        }
      } else if (this.nowServerIndex == 1) {
        const { data: res } = await this.$http({
          url: "smtpmail/pop3/port",
          params: { port: this.newPort },
          method: "get"
        });
        console.log(res);
        if (res.code === 20000) {
          this.getPopInfo();
          this.$message.success("修改成功!");
          this.newPort = "";
        } else {
          this.$message.error("修改失败!");
        }
      }
    },
    /**
     * @description 起停用服务器
     */
    async changeServerRunStatus(newStatus) {
      // 弹框询问用户是否修改数据
      const confirmRes = await this.$confirm(
        "此操作将修改服务器运行状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch((err) => err);
      if (confirmRes !== "confirm") {
        return this.$message.info("已取消修改");
      }
      let url = this.nowServerIndex === 0 ? "/smtpmail/smtp" : "/smtpmail/pop3";
      url += newStatus ? "/start" : "/stop";
      const { data: res } = await this.$http({
        url: url,
        method: "get"
      });
      console.log(res);
      if (res.code === 20000) {
        this.$message.success("操作成功!");
        this.nowServerIndex === 0 ? this.getSmtpInfo() : this.getPopInfo();
      }
    },
    handleSizeChange(newSize) {
      this.currentPageSize = newSize;
      this.getClubByType();
    },

    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getClubByType();
    },

    async getNowRowInfo(row) {
      this.nowRowClubInfo = JSON.parse(JSON.stringify(row));
    },

    modifyClub() {
      this.$refs.formRules.validate(async (valid) => {
        if (!valid) {
          return this.$message.error("请检查表单信息！");
        }
        // 弹框询问用户是否修改数据
        const confirmRes = await this.$confirm(
          "此操作将修改该社团信息, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).catch((err) => err);
        if (confirmRes !== "confirm") {
          return this.$message.info("已取消修改");
        }
        let form = {
          id: this.nowRowClubInfo.id,
          name: this.nowRowClubInfo.name
        };
        const { data: res } = await this.$http({
          url: `boot/club`,
          method: "put",
          params: form
        });
        if (res.code === 20000) {
          await this.getClubByType();
          this.editDialogFlag = false;
          return this.$message.success("修改社团信息成功！");
        } else {
          return this.$message.error("修改社团信息失败！");
        }
      });
    },

    getNewId(evt) {
      if (!evt) return this.$message.error("请选择社团！");
      this.nowClubType = evt[0];
      this.getClubByType();
    }
  }
};
</script>

<style>
.div1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>